<template>
  <view class="main">
    <!--申请加盟 -->

    <image style="width: 750rpx" src="/static/images/apply/join.png" mode="widthFix"></image>

    <view class="form">
      <view class="cu-form-group">
        <view class="title">选择区域</view>
        <input name="city" disabled placeholder="请选择区域" @tap="$refs.wanlAddress.show()" :value="city" />
      </view>
      <view class="cu-form-group">
        <view class="title">姓名</view>
        <input name="name" v-model="name" placeholder="请输入姓名" />
      </view>

      <view class="cu-form-group">
        <view class="title">联系电话:</view>
        <input name="phone" v-model="phone" placeholder="请输入联系电话" />
      </view>

      <view class="foot flex flex-direction" @click="saveForm" style="width: 500rpx; margin: 90rpx auto 20rpx auto">
        <button class="cu-btn wanl-bg-orange lg">立即提交</button>

        <!-- <view class="" style="margin: 30rpx auto  20rpx auto;">
					<text style="color: #666;font-size: 28rpx;">立即咨询</text>
				</view> -->
      </view>
    </view>

    <wanl-address ref="wanlAddress" @selectAddress="successSelectAddress"></wanl-address>
  </view>
</template>

<script>
export default {
  //注册组件
  components: {},
  data() {
    return {
      city: '',
      name: '',
      phone: '',
    };
  },
  //监听属性
  computed: {
    // test: {
    // 	//业务逻辑代码,test的值完全取决于return回来的值
    // 	get:()=> {return 2; },
    // 	set: (val)=> {}
    // }
  },
  /**
   * 监控data中的数据变化
   */
  watch: {
    // test: {
    // 	handler(newValue, oldValue) {
    // 	},
    // 	deep: true,	//深度监听
    // 	immediate: true,// 立即先去执行里面的handler方法
    // }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (option) {},
  /** 方法合集 */
  methods: {
    saveForm() {
      if (this.name && this.phone && this.city) {
        this.$api.post({
          url: '/wanlshop/shop/saveForm ',
          data: {
            name: this.name,
            phone: this.phone,
            city: this.city,
            type: 1, // 1 加盟 2 代理
          },
          success: res => {
            this.$wanlshop.msg('提交成功！');
            this.city = '';
            this.name = '';
            this.phone = '';
          },
        });
      }
    },
    successSelectAddress(address) {
      // 经营地址
      this.city = address.province + '/' + address.city + '/' + address.district;
      // console.log(' ========>',address);
    },
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {},
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {},
  //  监听窗口尺寸变化	5+App、微信小程序
  onResize: function (e) {},
  //  点击 tab 时触发，参数为Object，具体见下方注意事项           微信小程序、百度小程序、H5、5+App（自定义组件模式）
  onTabItemTap: function (e) {},
  //  监听页面滚动，参数为Object
  onPageScroll: function (e) {},
  //  监听原生标题栏按钮点击事件，参数为Object	         5+ App、H5
  onNavigationBarButtonTap: function (e) {},
  //  监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	5+App、H5
  onBackPress: function () {},
};
</script>
<style lang="scss" scoped>
.form {
  width: 710rpx;
  margin: 20rpx;
  background-color: #ffffff;

  border-radius: 10rpx;
  overflow: hidden;
}
</style>
